<template>
  <div class= 'wrapper'>	
	  <Magnifier 
			:link= 'link'
			:blank = 'blank'
			:imgUrl = 'imgUrl'
			:imgHeight = 'imgHeight'
			:imgWidth = 'imgWidth'
			:magHeight = 'magHeight'
			:magWidth = 'magWidth'
	  />
  </div>
</template>

<script>

//https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2400099477,3512064685&fm=26&gp=0.jpg
import { reactive, toRefs } from 'vue'
export default {
  name: 'App',
  setup (){
	  const state = reactive({
		  link: 'https://www.baidu.com',
		  blank: false,
		  imgUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2400099477,3512064685&fm=26&gp=0.jpg',
	      imgAlt: '山山水水',
		  imgHeight: 493,
		  imgWidth: 420,
		  magHeight: 100,
		  magWidth: 100
	  })
	 
	  return {...toRefs(state)}
  },
  mounted(){
	 
  }
}
</script>

<style>
	.wrapper {
		background: skyblue;
		width: 450px;
		margin: 100px auto;
	}
</style>
